window.onload = function () {
  let main = document.querySelector(".main-top-l");
  let mask = document.querySelector(".mask");
  let big = document.querySelector(".big");

  // 当鼠标经过
  main.addEventListener("mouseover", function () {
    mask.style.display = "block";
    big.style.display = "block";
  });
  // 当鼠标离开
  main.addEventListener("mouseout", function () {
    mask.style.display = "none";
    big.style.display = "none";
  });
  // 当鼠标移动
  main.addEventListener("mousemove", function (e) {
    let x = e.pageX - this.offsetLeft;
    let y = e.pageY - this.offsetTop;

    let maskX = x - mask.offsetWidth / 2;
    let maskY = y - mask.offsetHeight / 2;

    if (maskX <= 0) {
      maskX = 0;
    } else if (maskX >= main.offsetWidth - mask.offsetWidth) {
      maskX = main.offsetWidth - mask.offsetWidth;
    }

    if(maskY <= 0){
      maskY = 0;
    }else if(maskY >=180){
      maskY = 180;
    }
    mask.style.left = maskX + "px";
    mask.style.top = maskY + "px";

    // 大图片的移动距离 = 遮挡层移动距离 * 大图片最大移动距离 / 遮挡层的最大的移动距离
    let  maskMax = main.offsetTop - mask.offsetTop;
    let bigImg = document.querySelector(".bigImg");

    let bigMax = bigImg.offsetWidth - big.offsetWidth;

    let bigX = maskX * bigMax / maskMax;
    let bigY = maskX * bigMax / maskMax;
    bigImg.style.left = -bigX + "px";
    bigImg.style.top = -bigY + "px";

  });
};
